<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 23649
  Date: 2021/5/12
  Time: 8:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%
        String paths = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + paths + "/";
    %>
    <meta charset="utf-8">
    <title>华子医院</title>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>sweetalert.css">
    <script type="text/javascript" src="<%=basePath%>sweetalert-dev.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="<%=basePath%>layui-v2.6.5/layui/css/layui.css" media="all">
    <title>Title</title>

    <style type="text/css">
        #Info {
            width: 358px;
            height: 616px;
        }

        #headImg {
            width: 236px;
            height: 236px;

            border-radius: 50%;
            background-size: 236px 236px;
        }

        #InfoBody {

            margin-left: 60px;
        }

        #name {
            margin-left: 95px;
            line-height: 170px;
            font-size: 15px;
            font-family: '方正大黑简体';
        }

        .headImg {
            position: relative;
            top: 50px;
        }

        .title {
            font-family: '方正大黑简体';
            font-size: 30px;
        }

        .title span {
            font-size: 14px;
            color: #c29f65;
        }

        #introduce {
            position: relative;
            top: -600px;
            width: 414px;
            height: 328px;
            margin-left: 500px;

        }

        #guhao {
            border: #1E9FFF solid 0.5px;
            position: relative;
            top: -700px;
            width: 414px;
            height: 150px;
            margin-left: 500px;
        }

        #introduce div {
            margin-top: 15px;
        }

        .title_body {
            color: #707070;
            line-height: 22px;
            margin-top: 12px;
        }

        #input {
            margin-left: 150px;
        }

        #guhao {
            margin-top: 15px;
        }
    </style>
</head>
<body>
<div id="Info" style="background-image: url('<%=basePath%>img/doctorInfoBack.jpg')">
    <div id="InfoBody">
        <c:if test="${requestScope.doctor.name eq '汪渣渣'}">
            <div class="headImg" id="headImg" style="background-image: url('<%=basePath%>img/wzz.jpg')">

            </div>
        </c:if>
        <c:if test="${requestScope.doctor.name eq '高斯琳'}">
            <div class="headImg" id="headImg" style="background-image: url('<%=basePath%>img/gsl.jpg')">

            </div>
        </c:if>
        <c:if test="${requestScope.doctor.name eq '杨反则'}">
            <div class="headImg" id="headImg" style="background-image: url('<%=basePath%>img/yzh.jpg')">

            </div>
        </c:if>
        <c:if test="${requestScope.doctor.name eq '钱哥'}">
            <div class="headImg" id="headImg" style="background-image: url('<%=basePath%>img/qg.jpg')">

            </div>
        </c:if>
        <span id="name">${requestScope.doctor.name}</span>
    </div>
</div>
<c:if test="${requestScope.doctor.name eq '汪渣渣'}">
    <div id="introduce">
        <div class="title">汪渣渣 <span>${doctor.postion}</span> <span>&nbsp;&nbsp;&nbsp;&nbsp;${doctor.doctorke}</span>
        </div>
        <div class="title">个人简介</div>
        <div><span class="title_body">华子医学院骨科学组委员,临湘市学术技术带头人后备人选,<br>临湘市卫生计生委技术带头后备人选</span></div>
        <div class="title">专业擅长</div>
        <div class="wdw">
            <span class="title_body">1、各种德国骨科 2、成人骨科骨质增生</span>
        </div>
    </div>

</c:if>
<c:if test="${requestScope.doctor.name eq '高斯琳'}">

    <div id="introduce">
        <div class="title">高斯琳 <span>${doctor.postion}</span> <span>${doctor.doctorke}</span></div>
        <div class="title">个人简介</div>
        <div><span class="title_body">华子医学院骨科学组委员,临湘市学术技术带头人后备人选,<br>临湘市卫生计生委技术带头后备人选</span></div>

        <div class="title">专业擅长</div>
        <div class="wdw">
            <span class="title_body">1、各种德国骨科 2、成人骨科骨质增生</span>
        </div>
    </div>
    <div id="guahao">

    </div>
</c:if>
<c:if test="${requestScope.doctor.name eq '杨反则'}">

    <div id="introduce">
        <div class="title">杨反则 <span>${doctor.postion}</span> <span>${doctor.doctorke}</span></div>
        <div class="title">个人简介</div>
        <div><span class="title_body">华子医学院院长大人,临湘市学术技术带头人,<br>临湘市卫生计生委技术带头人</span></div>

        <div class="title">专业擅长</div>
        <div class="wdw">
            <span class="title_body">1、华子行为学研究 2、华子抖腿病研究与治疗</span>
        </div>
    </div>
    <div id="guahao">

    </div>
</c:if>
<c:if test="${requestScope.doctor.name eq '钱哥'}">

    <div id="introduce">
        <div class="title">钱哥 <span>${doctor.postion}</span> <span>${doctor.doctorke}</span></div>
        <div class="title">个人简介</div>
        <div><span class="title_body">华子医学院华子研究学组委员,临湘市千年老中医,<br>临湘市妇女之友</span></div>

        <div class="title">专业擅长</div>
        <div class="wdw">
            <span class="title_body">1、各种华子病 2、妇科病</span>
        </div>
    </div>
    <div id="guahao">

    </div>
</c:if>
<div id="guhao">
    <p>选择挂号时间</p>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">请选择日期</label>
                <div class="layui-input-inline">
                    <%--                    <input id="time" type="text" name="times" class="layui-input" id="test1" placeholder="yyyy-MM-dd">--%>
                    <input type="text" name="date" required lay-verify="required" placeholder="请选择时间"
                           class="layui-input" id="date" autocomplete="off">
                </div>
                <input id="userid" type="hidden" name="userid" value="${user.id}">
                <input id="username" type="hidden" name="userName" value="${user.name}">
                <input id="doctorname" type="hidden" name="doctorid" value="${doctor.doctorid}">
            </div>
        </div>
    </div>
    <input id="input" type="submit" class="layui-btn layui-btn-normal" value="确认挂号">

</div>
<img src="<%=basePath%>img/dibu.jpg" style="width: 1425px; margin-top: -700px">
<script src="<%=basePath%>layui-v2.6.5/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    //加载时间控件
    layui.use('laydate', function () {
        let date = layui.laydate;
        //执行一个date实例
        date.render({
            elem: '#date',  //指定元素
            type: "date",
            format: "yyyy-MM-dd",
            theme: "blue"
        });
    });

    // layui.use('laydate', function () {
    //     var laydate = layui.laydate;
    //
    //     //常规用法
    //     laydate.render({
    //         elem: '#test1'
    //     });
    //
    //     //国际版
    //     laydate.render({
    //         elem: '#test1-1'
    //         , lang: 'en'
    //     });
    //
    //     //年选择器
    //     laydate.render({
    //         elem: '#test2'
    //         , type: 'year'
    //     });
    //
    //     //年月选择器
    //     laydate.render({
    //         elem: '#test3'
    //         , type: 'month'
    //     });
    //
    //     //时间选择器
    //     laydate.render({
    //         elem: '#test4'
    //         , type: 'time'
    //     });
    //
    //     //日期时间选择器
    //     laydate.render({
    //         elem: '#test5'
    //         , type: 'datetime'
    //     });
    //
    //     //日期范围
    //     laydate.render({
    //         elem: '#test6'
    //         //设置开始日期、日期日期的 input 选择器
    //         //数组格式为 2.6.6 开始新增，之前版本直接配置 true 或任意分割字符即可
    //         , range: ['#test-startDate-1', '#test-endDate-1']
    //     });
    //
    //     //年范围
    //     laydate.render({
    //         elem: '#test7'
    //         , type: 'year'
    //         , range: true
    //     });
    //
    //     //年月范围
    //     laydate.render({
    //         elem: '#test8'
    //         , type: 'month'
    //         , range: true
    //     });
    //
    //     //时间范围
    //     laydate.render({
    //         elem: '#test9'
    //         , type: 'time'
    //         , range: true
    //     });
    //
    //     //日期时间范围
    //     laydate.render({
    //         elem: '#test10'
    //         , type: 'datetime'
    //         , range: true
    //     });
    //
    //     //自定义格式
    //     laydate.render({
    //         elem: '#test11'
    //         , format: 'yyyy年MM月dd日'
    //     });
    //     laydate.render({
    //         elem: '#test12'
    //         , format: 'dd/MM/yyyy'
    //     });
    //     laydate.render({
    //         elem: '#test13'
    //         , format: 'yyyyMMdd'
    //     });
    //     laydate.render({
    //         elem: '#test14'
    //         , type: 'time'
    //         , format: 'H点m分'
    //     });
    //     laydate.render({
    //         elem: '#test15'
    //         , type: 'month'
    //         , range: '~'
    //         , format: 'yyyy-MM'
    //     });
    //     laydate.render({
    //         elem: '#test16'
    //         , type: 'datetime'
    //         , range: '到'
    //         , format: 'yyyy年M月d日H时m分s秒'
    //     });
    //
    //     //开启公历节日
    //     laydate.render({
    //         elem: '#test17'
    //         , calendar: true
    //     });
    //
    //     //自定义重要日
    //     laydate.render({
    //         elem: '#test18'
    //         , mark: {
    //             '0-10-14': '生日'
    //             , '0-12-31': '跨年' //每年的日期
    //             , '0-0-10': '工资' //每月某天
    //             , '0-0-15': '月中'
    //             , '2017-8-15': '' //如果为空字符，则默认显示数字+徽章
    //             , '2099-10-14': '呵呵'
    //         }
    //         , done: function (value, date) {
    //             if (date.year === 2017 && date.month === 8 && date.date === 15) { //点击2017年8月15日，弹出提示语
    //                 layer.msg('这一天是：中国人民抗日战争胜利72周年');
    //             }
    //         }
    //     });
    //
    //     //限定可选日期
    //     var ins22 = laydate.render({
    //         elem: '#test-limit1'
    //         , min: '2016-10-14'
    //         , max: '2080-10-14'
    //         , ready: function () {
    //             ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
    //         }
    //     });
    //
    //     //前后若干天可选，这里以7天为例
    //     laydate.render({
    //         elem: '#test-limit2'
    //         , min: -7
    //         , max: 7
    //     });
    //
    //     //限定可选时间
    //     laydate.render({
    //         elem: '#test-limit3'
    //         , type: 'time'
    //         , min: '09:30:00'
    //         , max: '17:30:00'
    //         , btns: ['clear', 'confirm']
    //     });
    //
    //     //同时绑定多个
    //     lay('.test-item').each(function () {
    //         laydate.render({
    //             elem: this
    //             , trigger: 'click'
    //         });
    //     });
    //
    //     //初始赋值
    //     laydate.render({
    //         elem: '#test19'
    //         , value: '1989-10-14'
    //         , isInitValue: true
    //     });
    //
    //     //选中后的回调
    //     laydate.render({
    //         elem: '#test20'
    //         , done: function (value, date) {
    //             layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
    //         }
    //     });
    //
    //     //日期切换的回调
    //     laydate.render({
    //         elem: '#test21'
    //         , change: function (value, date) {
    //             layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
    //         }
    //     });
    //     //不出现底部栏
    //     laydate.render({
    //         elem: '#test22'
    //         , showBottom: false
    //     });
    //
    //     //只出现确定按钮
    //     laydate.render({
    //         elem: '#test23'
    //         , btns: ['confirm']
    //     });
    //
    //     //自定义事件
    //     laydate.render({
    //         elem: '#test24'
    //         , trigger: 'mousedown'
    //     });
    //
    //     //点我触发
    //     laydate.render({
    //         elem: '#test25'
    //         , eventElem: '#test25-1'
    //         , trigger: 'click'
    //     });
    //
    //     //双击我触发
    //     lay('#test26-1').on('dblclick', function () {
    //         laydate.render({
    //             elem: '#test26'
    //             , show: true
    //             , closeStop: '#test26-1'
    //         });
    //     });
    //
    //     //日期只读
    //     laydate.render({
    //         elem: '#test27'
    //         , trigger: 'click'
    //     });
    //
    //     //非input元素
    //     laydate.render({
    //         elem: '#test28'
    //     });
    //
    //     //墨绿主题
    //     laydate.render({
    //         elem: '#test29'
    //         , theme: 'molv'
    //     });
    //
    //     //自定义颜色
    //     laydate.render({
    //         elem: '#test30'
    //         , theme: '#393D49'
    //     });
    //
    //     //格子主题
    //     laydate.render({
    //         elem: '#test31'
    //         , theme: 'grid'
    //     });
    //
    //
    //     //直接嵌套显示
    //     laydate.render({
    //         elem: '#test-n1'
    //         , position: 'static'
    //     });
    //     laydate.render({
    //         elem: '#test-n2'
    //         , position: 'static'
    //         , lang: 'en'
    //     });
    //     laydate.render({
    //         elem: '#test-n3'
    //         , type: 'month'
    //         , position: 'static'
    //     });
    //     laydate.render({
    //         elem: '#test-n4'
    //         , type: 'time'
    //         , position: 'static'
    //     });
    // });

    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit
            , laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //监听指定开关
        form.on('switch(switchTest)', function (data) {
            layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                offset: '6px'
            });
            layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        });

        //监听提交
        form.on('submit(demo1)', function (data) {
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function () {
            form.val('example', {
                "username": "贤心" // "name": "value"
                , "password": "123456"
                , "interest": 1
                , "like[write]": true //复选框选中状态
                , "close": true //开关状态
                , "sex": "女"
                , "desc": "我爱 layui"
            });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function () {
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

    });

</script>
<script src="<%=basePath%>jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {

        $("#input").click(function () {
            var username = $("#username").val();
            var userid = $("#userid").val();
            var doctorid = $("#doctorname").val();
            var time = $("#data").val();
            console.log(username + userid + doctorid + time)
            $.post({
                url: "<%=basePath%>insert",
                data: {
                    username: username,
                    userid: userid,
                    doctorid: doctorid,
                    time: time
                },
                datatype: "json",
                success: function (data) {
                    if (data == 'true') {
                        swal("挂号", "挂号成功", "success");
                    } else {
                        alert("挂号失败！")
                    }
                }
            })
        })
    })
</script>
</body>
</html>
